<template>
  <el-dialog
    v-model="dialogVisible"
    title="编辑比赛"
    width="600px"
    :before-close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="100px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="比赛时间" prop="matchTime">
            <el-date-picker
              v-model="formData.matchTime"
              type="datetime"
              placeholder="选择比赛时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联赛名称" prop="leagueName">
            <el-input v-model="formData.leagueName" placeholder="请输入联赛名称" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="主队" prop="homeTeam">
            <el-input v-model="formData.homeTeam" placeholder="请输入主队名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客队" prop="awayTeam">
            <el-input v-model="formData.awayTeam" placeholder="请输入客队名称" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="主队Logo">
            <el-input v-model="formData.homeTeamLogo" placeholder="主队Logo URL" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客队Logo">
            <el-input v-model="formData.awayTeamLogo" placeholder="客队Logo URL" />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item label="外部ID" prop="externalId">
        <el-input v-model="formData.externalId" placeholder="请输入外部ID" />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { type MatchData } from "@/api/matches";
import { ElForm } from "element-plus";

interface Props {
  visible: boolean;
  matchData: MatchData | null;
}

interface Emits {
  (e: "update:visible", value: boolean): void;
  (e: "submit", data: Partial<MatchData>): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<InstanceType<typeof ElForm>>();
const loading = ref(false);
const dialogVisible = ref(false);

// 表单数据
const formData = reactive({
  matchTime: "",
  leagueName: "",
  homeTeam: "",
  awayTeam: "",
  homeTeamLogo: "",
  awayTeamLogo: "",
  externalId: ""
});

// 表单验证规则
const rules = {
  matchTime: [{ required: true, message: "请选择比赛时间", trigger: "change" }],
  leagueName: [{ required: true, message: "请输入联赛名称", trigger: "blur" }],
  homeTeam: [{ required: true, message: "请输入主队名称", trigger: "blur" }],
  awayTeam: [{ required: true, message: "请输入客队名称", trigger: "blur" }],
  externalId: [{ required: true, message: "请输入外部ID", trigger: "blur" }]
};

// 监听visible变化
watch(
  () => props.visible,
  (newVal) => {
    dialogVisible.value = newVal;
    if (newVal && props.matchData) {
      // 填充表单数据
      Object.assign(formData, {
        matchTime: props.matchData.matchTime,
        leagueName: props.matchData.leagueName,
        homeTeam: props.matchData.homeTeam,
        awayTeam: props.matchData.awayTeam,
        homeTeamLogo: props.matchData.homeTeamLogo || "",
        awayTeamLogo: props.matchData.awayTeamLogo || "",
        externalId: props.matchData.externalId
      });
    }
  },
  { immediate: true }
);

// 监听dialogVisible变化
watch(dialogVisible, (newVal) => {
  emit("update:visible", newVal);
});

/** 关闭弹窗 */
const handleClose = () => {
  dialogVisible.value = false;
  formRef.value?.resetFields();
};

/** 提交表单 */
const handleSubmit = async () => {
  if (!formRef.value) return;
  
  try {
    await formRef.value.validate();
    loading.value = true;
    
    // 只提交有变化的字段
    const updateData: Partial<MatchData> = {};
    if (props.matchData) {
      Object.keys(formData).forEach(key => {
        const formKey = key as keyof typeof formData;
        const originalValue = props.matchData![formKey as keyof MatchData];
        if (formData[formKey] !== originalValue) {
          (updateData as any)[formKey] = formData[formKey];
        }
      });
    }
    
    emit("submit", updateData);
    handleClose();
  } catch (error) {
    console.error("表单验证失败:", error);
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped lang="scss">
.dialog-footer {
  text-align: right;
}
</style>